import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import mockData from './data.json';
// 哈希模式
// import {hashRouter as Router,Link,Route} from 'react-router-dom';
// history模式
import {BrowserRouter as Router,Link,Route,Redirect,Switch} from 'react-router-dom';
// 导入redux组件
import {createStore} from 'redux';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>111</span></span></h1>
// console.log(mockData)

// redux学习:
// 解决react数据管理（状态管理），用于中大型，数据庞大，组件之间数据交互较大的情况，如果你不知到是否要用redux那就不用
// ——解决组件的数据通信
// ——解决数据和交互较多的应用
// 注意：redux只是一种状态管理的解决方案

// store: 数据仓库，保存数据的地方
// state：是一个对象，数据仓库的所有数据都存放在一个state里
// Action：一个动作，触发数据改变的方法
// Dispath：将动作触发成方法
// Reducer：一个函数，通过获取动作，改变数据，生成一个新的state，从而改边页面

// 安装：
// cnpm install redux --save


// 1.初始化数据
//用于通过动作创建新的state
// reducer有两个作用，1个是初始化数据，1个是通过获取动作改变数据
const reducer = function (state={num:0},action) { 
  console.log('action=>',action);
  switch (action.type) {
    case 'add':
      state.num++;
      break;
    case 'decrement':
        state.num--;
        break;
    default:
      break;
  };

  return {...state};
 }

//创建仓库
const store = createStore(reducer);

// 2.获取数据
let state = store.getState();
// 3.修改数据（通过动作修改数据）
//通过仓库的方法dispatch进行修改数据
store.dispatch({type:'add',content:{id:1,msg:'helloword!'}})
// 4.修改视图（监听数据变化，重新渲染视图）
// store.subscribe(()=>{
//   ReactDOM.render(<Counter></Counter>,root)
// })

// 定义组件
class Counter extends React.Component{
  constructor(props){
    super(props);
  };
  changeSate(){
    //通过仓库的方法dispatch进行修改数据
    store.dispatch({type:'add',content:{id:1,msg:'helloword!'}})
  }
  render(){
    return (
      <div>
        <h5>这是Counter组件，{console.log(state)}</h5>
        <button onClick={this.changeSate}>改变state的值</button>
      </div>
    )
  }
}


// 函数式计数器
let CounterFn = (props)=>{
    let state = store.getState();
    return (
      <div>
        <h1>计数数量：{state.num}</h1>
        <button onClick={add}>计数+1</button>
        <button onClick={decrement}>计数-1</button>
      </div>
    )
};
function add() { 
  store.dispatch({type:'add'});
  console.log(store.getState())
 }
 function decrement() { 
  store.dispatch({type:'decrement'});
  console.log(store.getState());
 }

 store.subscribe(()=>{
   ReactDOM.render(
    <CounterFn></CounterFn>,
    root
  );
 })
 ReactDOM.render(
  <CounterFn></CounterFn>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
